<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>恒远镜像</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.min.js"></script>
	</head>
	<style>
	</style>
	<body>
		
		<div class="page-header">
			<h1>恒远运维 <small>镜像站</small></h1>
		</div>
		<div class="container-fluid">
			<div class="row-fluid"  id="app">
				<!-- 侧列选择区 -->
				<div class="span3">
						<ul class="nav nav-pills nav-stacked" id="selectleft">
							<li class="active">
								<a href="#">
									介绍
								</a>
							</li>
							<li>
								<a href="ftp://10.3.27.253">作业FTP服务器</a>
							</li>
							<li>
								<a href="#external">外网镜像包 (较新)<span class="badge">{{external.length}}</span> </a>
							</li>
							<li>
								<a href="#inside">校园网镜像包 (局域网) <span class="badge">{{inside.length}}</span> </a>
							</li>
						</ul>
				</div>
				<!-- 内容区 -->
				<div class="span8">
					<div class="alert alert-info">
						<button class="close" type="button" data-dismiss='alert'>&times;</button>
						<strong>提示:</strong>镜像源一直更新中，可通过左侧导航栏选择外网镜像包还是内网镜像包
					</div>
					<div class="jumbotron">
						<h2>欢迎访问,这里是"恒远运维"</h2>
						<p> 
							<i class="glyphicon glyphicon-calendar"></i>
							最新公告:192.168.2.2服务器现在修复成为 
							<a href="ftp://10.3.27.253">10.3.27.253</a>
						</p>
					</div>
					<div class="row-fluid">
						<div class="page-header">
							<h3>外网镜像包</h3>
						</div>
						<p>种类齐全的镜像包、软件包，不占用局域网带宽，缺点是需要联网</p>
						<!-- 外网表格 -->
						
						<table class="table" id="external">
							<thead>
								<tr>
									<th>名称</th>
									<th>文件大小</th>
									<th>更新时间</th>
									<th>下载地址</th>
									<th>来源</th>
									<th>下载校验</th>
									
								</tr>
							</thead>
							<tr v-for="item in external" >
								<td>{{item.filename}}</td>
								<td>{{item.filesize}}</td>
								<td>{{item.updata}}</td>
								<td>
									<a v-bind:href="item.downloadaddress">
										<button type="button" class="btn btn-primary">下载</button>
									</a>
								</td>
								<td>
									<a v-bind:href="item.sourceaddress">{{item.sourcename}}</a>
								</td>
								<td>{{item.check}}</td>
							</tr>
							<!-- 模板 -->
							<!-- <tr>
								<td>#</td>
								<td>#</td>
								<td>#</td>
								<td>
									<a href="#">
										<button type="button" class="btn btn-primary">下载</button>
									</a>
								</td>
								<td>
									<a href="#">#</a>
								</td>
								<td>#</td>
							</tr> -->
						</table>
					</div>
					<div class="row-fluid">
						<div class="page-header">
							<h3>内网镜像包</h3>
						</div>
						<p>镜像包、软件包在校园网内下载速度快</p>
						<!-- 外网表格 -->
						<table class="table" id="inside">
							<thead>
								<tr>
									<th>名称</th>
									<th>文件大小</th>
									<th>更新时间</th>
									<th>下载地址</th>
									<th>来源</th>
									<th>下载校验</th>
									
								</tr>
							</thead>
							<tr v-for="item in inside" >
								<td>{{item.filename}}</td>
								<td>{{item.filesize}}</td>
								<td>{{item.updata}}</td>
								<td>
									<a v-bind:href="item.downloadaddress">
										<button type="button" class="btn btn-primary">下载</button>
									</a>
								</td>
								<td>
									<a v-bind:href="item.sourceaddress">{{item.sourcename}}</a>
								</td>
								<td>{{item.check}}</td>
							</tr>
							<!-- 模板 -->
							<!-- <tr>
								<td>#</td>
								<td>#</td>
								<td>#</td>
								<td>
									<a href="#">
										<button type="button" class="btn btn-primary">下载</button>
									</a>
								</td>
								<td>
									<a href="#">#</a>
								</td>
								<td>#</td>
							</tr> -->
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<!-- js代码区 -->
		<script>
			//侧边栏选择效果 失效BUG
			$("#selectleft li").click(function(){
				var obj=$(this).siblings("li");
				obj.removeClass("active");
				$(this).addClass("active");
			});
		</script>
		
		
		<!-- Vue写的载入JSON串内的内容 -->
		<script>
			
			var app=new Vue({
				el:"#app",
				data:{
					external:{},
					inside:{},
				},
				mounted:function(){
					this.run();
				},
				methods:{
					run:function(){
						//获取后台信息
						var _self=this;
						$.get("download.json",function(data){
							_self.external=data.external;
							_self.inside=data.inside;
							
						});
						console.log("Init success");
					}
				}
			})
		</script>
		 <!-- jq写的载入JSON串的内容 -->
		<!-- <script>
			//加载数据库文件
			$.get("download.json",function(JsonDate){
				var AllJsonDate=JsonDate;//初始化
				$.each(AllJsonDate,function(index,item){
					//检测是外网还是内网的信息
					if (index=="external"){
						//外网开始写页面
						$.each(item,function(inindex,initem){
							TableAppend="<tr><td>"+initem.filename+"</td>";
							TableAppend+="<td>"+initem.filesize+"</td>";
							TableAppend+="<td>"+initem.updata+"</td>";
							TableAppend+="<td><a href='"+initem.downloadaddress+"'><button type='button' class='btn btn-primary'>下载</button></a></td>";
							TableAppend+="<td><a href='"+initem.sourceaddress+"'>"+initem.sourcename+"</td>";
							TableAppend+="<td>"+initem.check+"</td>";
							$("#external").append(
								TableAppend
							);
						});
					}else if (index=="inside"){
						//内网开始写页面
						$.each(item,function(inindex,initem){
							TableAppend="<tr><td>"+initem.filename+"</td>";
							TableAppend+="<td>"+initem.filesize+"</td>";
							TableAppend+="<td>"+initem.updata+"</td>";
							TableAppend+="<td><a href='"+initem.downloadaddress+"'><button type='button' class='btn btn-primary'>下载</button></a></td>";
							TableAppend+="<td><a href='"+initem.sourceaddress+"'>"+initem.sourcename+"</td>";
							TableAppend+="<td>"+initem.check+"</td>";
							$("#inside").append(
								TableAppend
							);
						});
					}
				});
				
			});
// 			TableAppend="<tr><td>"+JsonDate.filename+"</td>";
// 			TableAppend+="<td>"+JsonDate.filesize+"</td>";
// 			TableAppend+="<td>"+JsonDate.update+"</td>";
// 			TableAppend+="<td><a href='"+JsonDate.downloadaddress+"'><button type='button' class='btn btn-primary'>下载</button></a></td>";
// 			TableAppend+="<td><a href='"+JsonDate.sourceaddress+"'>"+JsonDate.sourcename+"</td>";
// 			TableAppend+="<td>"+JsonDate.check+"</td>";
// 			$("#external").append(
// 				TableAppend
// 			);
		</script> -->
	</body>
</html>
